<template>
  <div class="box1">
    <!--配置列表下面的列表 -->
    <div class="box">
      <h2>管理系统</h2>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="pass">
          <el-input
            prefix-icon="iconfont icon-user"
            type="text"
            size="small"
            v-model="ruleForm.pass"
            autocomplete="true"
          >
          </el-input>
        </el-form-item>
        <!-- 自定义眼睛睁开闭 -->
        <el-form-item prop="pwd">
          <el-input
            @click.native="changeTpye"
            prefix-icon=" iconfont icon-suo"
            :suffix-icon="
              isshow ? 'iconfont icon-yanjing_bi' : 'iconfont icon-yanjing_kai'
            "
            size="small"
            :type="isshow ? 'password' : 'text'"
            v-model="ruleForm.pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- button按钮 -->
        <el-form-item>
          <el-button
            ref="fro"
            size="small"
            type="primary"
            class="widt"
            @click="fn"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//引入axios
//通过解构的方式来得到需要的函数
import { api_js } from "@/utils/api.js";
//通过解构的方式来获得存储到本地
import local from "@/utils/sess.js"
export default {
  data() {
    return {
      //这个是表单的值
      ruleForm: {
        pass: "",
        pwd: "",
      },
      isshow: true,
      //表单的验证
      rules: {
        pass: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    fn() {
      // 配置ajax

      //validate 是框架内置的表单验证   vali就是所有输入框的验证结果

      this.$refs.ruleForm.validate(async (vali) => {
        //   vali就是所有输入框的验证结果 如果都通过会返回true 没通过返回false

        if (vali) {
          let  {msg,code,token}  = await api_js({
            account: this.ruleForm.pass,
            password: this.ruleForm.pwd,
          });
         
        //这是发送成功
          if (code === 0) {
            local.set("uid",token)
            // 登录成功后 跳转首页
           this.$router.push("/home");
          }
        } else {
          return;
        }
      });
    },

    changeTpye(e) {
      if (e.target.className.includes("yanjing")) {
        this.isshow = !this.isshow;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box1 {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  text-align: center;
  width: 400px;
}
h2 {
  line-height: 60px;
  width: 100%;
  color: #ffffff;
  font-size: 20px;
}
.widt {
  width: 100%;
}
</style>